<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手风琴效果</title>
    <style>
        a:link,a:visited{color:black;text-decoration: none;}
          a:hover{color: #fd4913;}
        .in{text-align: center;}
        ul{list-style:none;margin:0;padding:0}
        div{width:1200px;height:400px;margin:50px auto;overflow:hidden}
        div li{width:240px;height:400px;float:left}
      </style>
    </head>
    <body>
        <h2>手风琴效果</h2>
      <div id="box">
        <ul>
          <li><img src="images/1.jpg"></li>
          <li><img src="images/2.jpg"></li>
          <li><img src="images/3.jpg"></li>
          <li><img src="images/4.jpg"></li>
          <li><img src="images/5.jpg"></li>
        </ul>
      </div>
      <script src="jquery-1.12.4.min.js"></script>
      <script>
        $('#box>ul>li').on({
          mouseover: function () {
            // 当前的li的所有的兄弟元素，并修改其宽度
            $(this).siblings('li').css('width', '60.5px');
            // 将当前li的宽度设置为图片的宽度
            $(this).css('width', '958px');
          },
          mouseout: function () {
            // 显示所有li的部分图片内容
            $('#box>ul>li').css('width', '240px');
          }
        });
      </script>
      <div class="in">
        <p><a href="default.html">返回目录</a></p>
        <p><a href="第十一章.html">返回十一章</a></p>
        <p><a href="无缝轮播图.html">下一题</a></p></div>
    </body>
  </html>
